<template>
  <view class="menuContainer CardWrap">
    <block v-for="(item, index) in menuList" :key="index">
      <view
        class="menuItem"
        :type="item.type ? item.type : ''"
        @click="routeModel(item.path)"
      >
        <view class="icon">
          <image class="iconImg" :src="item.icon" lazy-load="true"></image>
        </view>
        <view class="text">{{ item.text }}</view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 菜单
      menuList: [
        {
          icon: "/static/img/icons/icon_main_01.svg",
          text: "随手拍",
          path: "suiSubmit",
        },
        {
          icon: "/static/img/icons/icon_main_02.svg",
          text: "事件地图",
          path: "eventmap",
        },
      ],
    };
  },
  methods: {
    routeModel(name) {
      if (!uni.getStorageSync('_accessToken')) {
        this.$Router.push({
          name: 'login'
        })
      } else {
        this.$Router.push({
          name,
        });
      }

    }
  }
};
</script>
<style lang='scss' scoped>
.menuContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 40rpx 0 0;
  margin: 0 auto;
  width: 100%;
  height: 200rpx;
  // box-sizing: border-box;
  background-color: transparent;
  box-shadow: none;
}

.menuItem {
  flex: 0 0 20%;
  margin-bottom: 70rpx;
}

.menuItem {
  .icon {
    width: 80rpx;
    margin: 0 auto 10rpx;
  }
}
.menuItem {
  .iconImg {
    width: 80rpx;
    height: 80rpx;
  }
}

.menuItem {
  .text {
    font-size: 22rpx;
    color: #333333;
    text-align: center;
  }
}

.cardWrap {
  width: calc(100% - 60rpx);
  margin: 0 30rpx 30rpx 30rpx;
  border-radius: 20rpx;
}
</style>
